<template>
  <ModalPanel
    :class="$style.basePageModal"
    :destroy-on-close="true"
    v-on="$listeners"
    :title="title"
    :modal="false"
    :visible="visible"
    :onCancel="onCancel"
    :onOk="onSubmit"
  >
    <el-form
      size="medium"
      label-width="80px"
      :model="temporaryData"
      ref="formdoalog"
      :rules="formdialog"
      :validate-on-rule-change="false"
    >
      <el-row>
        <el-col :span="item.width || 12" v-for="item of editColumn" :key="item.prop">
          <el-form-item :label="item.name" :prop="item.prop">
            <template v-if="item.type==='text'">
              <el-input :placeholder="'请输入'+item.name" v-model="temporaryData[item.prop]"></el-input>
            </template>
            <template v-else-if="item.type==='number'">
              <el-input
                type="number"
                :placeholder="'请输入'+item.name"
                v-model="temporaryData[item.prop]"
              ></el-input>
            </template>
            <template v-else-if="item.type==='time'">
              <el-date-picker
                v-model="temporaryData[item.prop]"
                type="date"
                value-format="timestamp"
                :placeholder="'请输入'+item.name"
              ></el-date-picker>
            </template>
            <template v-else-if="item.type==='inputNumber'">
              <el-input-number
                v-model="temporaryData[item.prop]"
                @change="value => $attrs[item.prop]?$attrs[item.prop](value):{}"
                :min="1"
              ></el-input-number>
            </template>
            <template v-else-if="item.type==='textarea'">
              <el-input
                v-model="temporaryData[item.prop]"
                :placeholder="'请输入'+item.name"
                type="textarea"
              ></el-input>
            </template>

            <template v-else-if="item.type==='select'">
              <el-select
                v-model="temporaryData[item.prop]"
                @change="value => $attrs[item.prop] ? $attrs[item.prop](value) : {}"
                :placeholder="'请输入'+item.name"
              >
                <el-option
                  v-for="(optionItem,index) of item.optionList"
                  :key="optionItem.id || index"
                  :label="item.optionBindLabel ? optionItem[item.optionBindLabel] : optionItem.name"
                  :value="item.optionBindValue ? optionItem[item.optionBindValue] : optionItem.value"
                ></el-option>
              </el-select>
            </template>

            <template v-else-if="item.type==='other'">
                <slot :name="item.slotName" :data="temporaryData[item.prop]" :item="item" />
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ModalPanel>
</template>
<script>
import ModalPanel from "@/components/ModalPanel";
import { arrayToObject } from "@/tools";
export default {
  components: {
    ModalPanel,
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    editColumn: {
      type: Array,
      default: () => []
    },
    updateData: {
      type: Function,
      default: () => {}
    },
    openModal: {
      // 打开弹框时，回调这个函数
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false,
      isCreate: false,
      temporaryData: {},
      modalTitle: '',
      postUrl: '',
      replenishData: {}
    };
  },
  computed: {
    formdialog() {
      let arr = this.editColumn
        .filter(item => item.required)
        .map(item => ({
          [item.prop]: {
            required: true,
            message: item.name + "不能为空",
            trigger: "blur"
          }
        }));
      return arrayToObject(arr, "prop");
    }
  },
  methods: {
    onCancel() {
      this.temporaryData = {};
      this.visible = false;
      if(this.$refs["formdoalog"])this.$refs["formdoalog"].resetFields();
    },
    createRow(postUrl, replenishData={}) {
      this.postUrl = postUrl
      let getDefaultList = this.editColumn
        .filter(item => item.default)
        .map(item => ({ [item.prop]: item.default }));
      this.temporaryData = { ...arrayToObject(getDefaultList) };
      this.openModal("create", { ...this.temporaryData });
      this.modalTitle = "新建" + this.title;
      this.isCreate = true;
      this.replenishData = replenishData
      this.visible = true;
    },
    modifyRow(rowData, postUrl, replenishData) {
      this.postUrl = postUrl
      this.openModal("edit", { ...rowData });
      this.modalTitle = "编辑" + this.title;
      this.isCreate = false;
      this.replenishData = replenishData
      this.temporaryData = { ...rowData };
      this.visible = true;
    },
    async deleteRow(ids, postUrl) {
      this.postUrl = postUrl
      if (ids.length === 0) {
        this.$message({
          message: "请先选择要删除的项",
          type: "warning"
        })
      } else {
        await this.$store.dispatch({
          type: "sysSetting/delete",
          ids: ids,
          url: postUrl
        });
        // ids = [];
        this.updateData('update');
        this.onCancel();
      }
    },
    async onSubmit() {
      this.$refs["formdoalog"].validate(async valid => {
        if (valid) {
          if (this.isCreate) {
            await this.$store.dispatch({
              type: "sysSetting/create1",
              values: {...this.temporaryData, ...this.replenishData}  ,
              url: this.postUrl
            });
          } else {
            await this.$store.dispatch({
              type: "sysSetting/modify1",
              values: { ...this.temporaryData, ...this.replenishData },
              url: this.postUrl
            });
          }
          this.updateData("update");
          this.onCancel();
        } else {
          return false;
        }
      });
    }
  },
  mounted() {},
  created() {}
};
</script>
<style lang='scss' module>
.basePageModal {
  :global {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .el-input-number--medium {
      width: 220px;
    }
  }
}
</style>

